'use strict';
import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity, ViewPropTypes, CameraRoll } from 'react-native';
import { TransformView } from 'teaset';
import PropTypes from 'prop-types'
import ImageView from './ImageView';

class LargePicture extends React.PureComponent {

    static propTypes = {
        ...Image.propTypes,
        style: ViewPropTypes.style,
        imageStyle: ViewPropTypes.style,
        minScale: PropTypes.number,
        maxScale: PropTypes.number,
    }

    static defaultProps = {
        ...Image.defaultProps,
    }

    _onLongPress = () => {
        const { source } = this.props
        const save = async () => {
            const result = await Services.download(source.uri)
            if (result) {
                const rollUri = __IOS__ ? result : `file://${result}`
                const saveRes = await CameraRoll.saveToCameraRoll(rollUri, 'photo')
                if (saveRes) {
                    ToastManager.show('图片已保存至相册');
                } else {
                    ToastManager.show('保存失败');
                }
            } else {
                ToastManager.show('下载失败')
            }
        }
        ActionsManager.show({
            title: '',
            actions: [
                { title: '保存图片', onPress: save }
            ]
        })
    }

    _onPressHide = () => {
        AlertManager.hide()
    }

    _onPressShow = () => {
        const { source, minScale, maxScale } = this.props
        const content = (
            <TransformView
                style={styles.transformView}
                minScale={minScale}
                maxScale={maxScale}
                onLongPress={this._onLongPress}
                onPress={this._onPressHide}>
                <ImageView
                    style={styles.largeImage}
                    source={source}
                    maxImageWidth={SCREEN_WIDTH}
                />
            </TransformView>
        )
        AlertManager.showPopView(content, { type: 'none', overlayOpacity: 1.0, containerStyle: { flex: 1 } })
    }

    render() {
        const { style, imageStyle, ...others } = this.props
        return (
            <TouchableOpacity style={style} onPress={this._onPressShow}>
                <ImageView style={imageStyle} {...others} />
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    transformView: {

    },
    largeImage: {
        width: SCREEN_WIDTH,
    }
});

export default LargePicture